<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="index.css">
</head>

<body>

<div class="app">
  <header class="header">
    <h1 class="header-text">
      Photo Library Collage
    </h1>
  </header>
  <div class="container">
    <div class="item item--scrollable">
      <!--Thumbnails-->
      <div class="thumbnails-container"></div>
    </div>
    <div class="item">
      <div>
        <div class=actions>
          <select class="select"></select>
          <button class="btn btn--primary btn-create-collage"> Create collage </button>
          <button class="btn btn--secondary btn-start-over"> Start over </button>
          <button class="btn btn--success btn-download" onClick={downloadCollage}> Download </button>
        </div>
        <div class="previewContainer">
          <div class="spinnerContainer spinnerContainer--hidden">
            <div class="spinner"></div>
            <p class="spinnerText"></p>
          </div>
          <canvas class="canvas"></canvas>
        </div>
        <div class="loggerContainer">
          <p class="logger-title">Logger:</p>
        </div>
      </div>
    </div>
  </div>
</div>


<script type="module" src="index.js"></script>
</body>
</html>
